<template>
  <div>
    <div class="filter-bar">
      <el-form :inline="true" :model="filter" class="filter-form">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="filter.dateRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="数据类型">
          <el-select v-model="filter.dataType" placeholder="请选择">
            <el-option label="温度数据" value="temperature"></el-option>
            <el-option label="湿度数据" value="humidity"></el-option>
            <el-option label="保质期数据" value="shelfLife"></el-option>
            <el-option label="销售数据" value="sales"></el-option>
            <el-option label="预警数据" value="warnings"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品类别">
          <el-select v-model="filter.productType" placeholder="请选择">
            <el-option label="全部" value="all"></el-option>
            <el-option label="速冻类" value="frozen"></el-option>
            <el-option label="即食类" value="readyToEat"></el-option>
            <el-option label="半成品类" value="semifinished"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <div class="chart-container">
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="chart-card">
            <div class="chart-header">
              <h3>{{ chartTitle }}</h3>
              <div class="chart-actions">
                <el-button-group>
                  <el-button size="small" :type="viewType === 'line' ? 'primary' : 'default'" @click="viewType = 'line'">折线图</el-button>
                  <el-button size="small" :type="viewType === 'bar' ? 'primary' : 'default'" @click="viewType = 'bar'">柱状图</el-button>
                </el-button-group>
                <el-button size="small" icon="el-icon-download" @click="exportData">导出</el-button>
              </div>
            </div>
            <div class="chart-body" ref="mainChart" style="height: 400px;"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <div class="data-analysis">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="analysis-card">
            <h4>数据总览</h4>
            <div class="data-item">
              <span class="label">平均值</span>
              <span class="value">{{ dataAnalysis.average }}</span>
            </div>
            <div class="data-item">
              <span class="label">最大值</span>
              <span class="value">{{ dataAnalysis.max }}</span>
            </div>
            <div class="data-item">
              <span class="label">最小值</span>
              <span class="value">{{ dataAnalysis.min }}</span>
            </div>
            <div class="data-item">
              <span class="label">标准差</span>
              <span class="value">{{ dataAnalysis.deviation }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="analysis-card">
            <h4>异常分析</h4>
            <div class="data-item">
              <span class="label">异常次数</span>
              <span class="value warning-text">{{ dataAnalysis.abnormalCount }}</span>
            </div>
            <div class="data-item">
              <span class="label">异常比例</span>
              <span class="value warning-text">{{ dataAnalysis.abnormalRate }}</span>
            </div>
            <div class="data-item">
              <span class="label">最长异常持续时间</span>
              <span class="value warning-text">{{ dataAnalysis.maxAbnormalDuration }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="analysis-card">
            <h4>趋势预测</h4>
            <div class="data-item">
              <span class="label">未来7天趋势</span>
              <span class="value" :class="dataAnalysis.trend === '上升' ? 'success-text' : dataAnalysis.trend === '下降' ? 'warning-text' : ''">
                {{ dataAnalysis.trend }}
              </span>
            </div>
            <div class="data-item">
              <span class="label">预计变化率</span>
              <span class="value" :class="dataAnalysis.changeRate > 0 ? 'success-text' : dataAnalysis.changeRate < 0 ? 'warning-text' : ''">
                {{ dataAnalysis.changeRate > 0 ? '+' : '' }}{{ dataAnalysis.changeRate }}%
              </span>
            </div>
            <div class="data-item">
              <span class="label">置信度</span>
              <span class="value">{{ dataAnalysis.confidence }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <div class="data-table-container">
      <h3>详细数据</h3>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="productName" label="产品名称"></el-table-column>
        <el-table-column prop="value" label="数值"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template scope="scope">
            <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          layout="total, prev, pager, next"
          :total="pagination.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 过滤条件
      filter: {
        dateRange: [new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000), new Date()],
        dataType: 'temperature',
        productType: 'all'
      },
      
      // 图表类型
      viewType: 'line',
      
      // 数据分析
      dataAnalysis: {
        average: '-15.8°C',
        max: '-10.2°C',
        min: '-19.5°C',
        deviation: '2.3°C',
        abnormalCount: '12次',
        abnormalRate: '8.2%',
        maxAbnormalDuration: '2.5小时',
        trend: '稳定',
        changeRate: 0,
        confidence: '87%'
      },
      
      // 表格数据
      tableData: [
        {
          date: '2023-03-24 10:15:00',
          productName: '速冻水饺(韭菜猪肉)',
          value: '-15.2°C',
          status: '正常'
        },
        {
          date: '2023-03-24 11:15:00',
          productName: '速冻水饺(韭菜猪肉)',
          value: '-14.8°C',
          status: '正常'
        },
        {
          date: '2023-03-24 12:15:00',
          productName: '速冻水饺(韭菜猪肉)',
          value: '-12.5°C',
          status: '异常'
        },
        {
          date: '2023-03-24 13:15:00',
          productName: '速冻水饺(韭菜猪肉)',
          value: '-13.8°C',
          status: '异常'
        },
        {
          date: '2023-03-24 14:15:00',
          productName: '速冻水饺(韭菜猪肉)',
          value: '-16.2°C',
          status: '正常'
        }
      ],
      
      // 分页数据
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 128
      },
      
      // 图表实例
      chart: null
    }
  },
  
  computed: {
    chartTitle() {
      const typeMap = {
        temperature: '温度变化趋势',
        humidity: '湿度变化趋势',
        shelfLife: '保质期数据',
        sales: '销售数据',
        warnings: '预警数据'
      };
      
      return typeMap[this.filter.dataType] || '数据趋势';
    }
  },
  
  mounted() {
    this.initChart();
  },
  
  methods: {
    // 初始化图表
    initChart() {
      // 这里在实际项目中应引入echarts库
      // this.chart = this.$echarts.init(this.$refs.mainChart);
      console.log('初始化图表');
      
      // 模拟数据
      const xAxisData = ['3/18', '3/19', '3/20', '3/21', '3/22', '3/23', '3/24'];
      let seriesData = [];
      
      if (this.filter.dataType === 'temperature') {
        seriesData = [-16.5, -15.8, -16.2, -14.3, -12.5, -15.8, -16.1];
      } else if (this.filter.dataType === 'humidity') {
        seriesData = [58, 62, 65, 68, 72, 65, 60];
      } else {
        seriesData = [125, 132, 145, 178, 190, 212, 205];
      }
      
      // 实际的echarts配置
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: this.chartTitle,
          type: this.viewType,
          data: seriesData,
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          }
        }]
      };
      
      // this.chart.setOption(option);
    },
    
    // 筛选数据
    handleFilter() {
      this.$message({
        message: '数据已更新',
        type: 'success'
      });
      
      // 重新初始化图表
      this.initChart();
    },
    
    // 重置筛选条件
    resetFilter() {
      this.filter = {
        dateRange: [new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000), new Date()],
        dataType: 'temperature',
        productType: 'all'
      };
      
      this.handleFilter();
    },
    
    // 导出数据
    exportData() {
      this.$message({
        message: '数据导出成功',
        type: 'success'
      });
    },
    
    // 分页切换
    handleCurrentChange(page) {
      this.pagination.currentPage = page;
      // 实际应该调用API获取对应页的数据
    }
  },
  
  watch: {
    viewType() {
      this.initChart();
    }
  }
}
</script>

<style scoped>
.filter-bar {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.chart-container {
  margin-bottom: 20px;
}

.chart-card {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.chart-actions {
  display: flex;
  gap: 10px;
}

.data-analysis {
  margin-bottom: 20px;
}

.analysis-card {
  height: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.analysis-card h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #303133;
}

.data-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.data-item .label {
  color: #909399;
}

.data-item .value {
  font-weight: bold;
}

.data-table-container {
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.data-table-container h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
  color: #303133;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}

.warning-text {
  color: #f56c6c;
}

.success-text {
  color: #67c23a;
}
</style> 